<template>
  <div class="page">
    <headerbar>现场观摩点</headerbar>
    <section class="frame-content-sub no-bg">
      <div v-if="isRecommendNow==1" class="week-top">
        <!--<div class="icon-text">本周推荐</div>-->
        <div class="icon">
<!--          <img src="../../../../../static/images/dangjian/home/workingTrends/icon-top-none.png" alt="">-->
        </div>
<!--        <div class="title titleStyle">{{groupName}} </div>-->
        <div class="title titleStyle">{{title}} </div>
        <div class="btn-up" @click="up()">
          <div v-if="hasUp" class="inner">
            <img src="../../../../../static/images/dangjian/home/workingTrends/week-up-active.png" alt="">
            <span class="text">已点赞</span>
          </div>
          <div v-if="!hasUp" class="inner">
            <img src="../../../../../static/images/dangjian/home/workingTrends/week-up.png" alt="">
            <span class="text">点赞</span>
          </div>
        </div>
      </div>
    <section class="">
      <ul class="tab">
        <li @click="menu(0)" :class="{'active':tabIndex==0}"><span>固本有方</span></li>
        <li @click="menu(1)" :class="{'active':tabIndex==1}"><span>荣誉橱窗</span></li>
<!--        <li @click="loadDataH5()" :class="{'active':tabIndex==2}"><span>支部空间</span></li>-->
      </ul>
    </section>
      <section class="d-scroll-head list-news-img bg-white mgt-0" v-if="tabIndex === 0">
        <fetchData v-if="isLoading" :loading="isLoading" :data="newsQueryData"></fetchData>
        <cube-scroll
          ref="scroll"
          :options="launchOptions"
          @pulling-up="launchOnPullingUp"
        >
          <div class="item" @click="goRedCloudNewsDetail(item)" v-for="(item,index) in newsQueryData" :key="'m' + index">
            <div class="img">
              <img v-if="!item.listPic" src="../../../../../static/images/user_bg.jpg" alt="">
              <img v-if="item.listPic" :src="tools.getImgUrl(item.listPic)" alt="">
            </div>
            <div class="cont">
              <h2 class="title">{{item.title}}</h2>
              <div class="tip no-wrap">
                <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
                <!--<span class="source">{{item.source || '未知'}}</span>-->
                <span class="no-wrap">阅读量  {{item.views || 0}}</span>
              </div>
            </div>
          </div>
<!--          <noData :loading="isLoading" v-if="!isLoading && newsQueryData.length === 0" ></noData>-->
          <div :loading="isLoading" v-if="!isLoading && newsQueryData.length === 0"  class="text-center no-data pdv-10">
            <p class="pdv-10"></p>
            <img src="../../../../../static/images/no_data.png"/>

            <p>暂无数据</p>
          </div>
<!--          <div class="more" @click="more()">更多支部</div>-->
          <onBottom v-else-if="onBottom"></onBottom>
          <p class="pdv-9"></p>
        </cube-scroll>
      </section>
<!--  荣誉橱窗 -->
      <section class="pdt-2" v-if="tabIndex==1">
        <fetchData v-if="isLoading" :loading="isLoading" :data="swipeData"></fetchData>
        <div class="demo-honor"  v-if="swipeData.length>0">
          <template v-for="(item,index) in swipeData">
            <div class="item" v-if="item.id">
              <div class="honor-wrap con">
<!--                <img v-if="!item.honorPic" src="../../../../../static/images/dangjian/home/more-video-cover.jpg" alt="">-->
                <img @click="showImagePreview(item)" v-if="item.honorPic" :src="getPoster(item)" alt="">
                <div class="subscript">{{getLevel(item)}}
              </div>
              </div>
            </div>
            <div class="item" v-else="">
              <div class="content-null">
              </div>
            </div>
            <div v-if="index%2 !== 0" class="bracket"></div>
            <div v-if="index%2 == 0 && index+1==swipeData.length"  class="bracket"></div>
          </template>
        </div>
        <div class="text-center no-data" :loading="isLoading" v-if="!isLoading && swipeData.length===0">
          <img src="../../../../../static/images/no_data.png" alt="">
<!--          <p>暂无数据</p>-->
          <p>功能未开放</p>
        </div>
<!--        <div class="more" @click="more()">更多支部</div>-->
      </section>
      <section class="pdt-2" v-if="tabIndex===2">
        <div class="text-center no-data">
          <img src="../../../../../static/images/no_data.png" alt="">
<!--          <p>暂无数据</p>-->
          <p>功能未开放</p>
        </div>
      </section>
      <dialogMore class="ob-dialog" :title="title" ref="dialog">
        <section class="main-dialog">
          <demoHonorDetail></demoHonorDetail>
<!--          <div class="radio">-->
<!--            <div class="play">-->
<!--            </div>-->
<!--          </div>-->
        </section>
<!--        <div class="footer-dialog">-->
<!--          <div class="good-btn" @click="getGood" :class="{'active':showGood}">点赞({{num}})<img v-if="!showGood" class="good-icon" :src="goodSrc" alt=""><img v-else :src="getGoodSrc" alt=""></div>-->
<!--          <div class="signin-btn" @click="getSign" v-if="!showSign">立即签到<img class="sign-icon" :src="signinSrc" alt=""></div>-->
<!--          <div class="signin-btn" @click="getSign" v-else :class="{'active':showSign}">已签到<img class="sign-icon" :src="signinSrc" alt=""></div>-->
<!--        </div>-->
      </dialogMore>
    </section>
  </div>
</template>

<script>
  import dialogMore from '../../../../components/layout/dialogMore.vue'
  import demoHonorDetail from '../../../../components/dangjian/home/demoHonorDetail.vue'
  import tools from '@/utils/tools'
  import cancel from '../../../../../static/images/dangjian/home/cancel.png'
  import good from '../../../../../static/images/dangjian/home/good.png'
  import getGood from '../../../../../static/images/dangjian/home/getGood.png'
  import play from '../../../../../static/images/dangjian/home/play.png'
  import signin from '../../../../../static/images/dangjian/home/signin.png'
  export default {
    components: { dialogMore,demoHonorDetail },
    name: 'demoHonor',
    data () {
      return {
        dialoNotice:{},
        pageNo: 1,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        launchOptions: {
          pullUpLoad: true,
          scrollbar: false
        },
        swipeData: [],
        newsQueryData: [],
        pageIndex: 1,
        pageSize: 1000,
        countNum: true,
        onBottom: false,
        isLoading: true,
        hasUp: false,
        title: '骆家桥村蔬菜种植基地',
        cancelSrc: cancel,
        goodSrc: good,
        getGoodSrc: getGood,
        playSrc: play,
        signinSrc: signin,
        num: '2000',
        signText: '立即签到',
        showGood: false,
        showSign: false,
        partyGroupId: '',
        groupName: '',
        dgwName: '',
        isRecommendNow: 0,
        tabIndex: 0,
        currentTabIndex: 0,
        userId: '',
        title:''
      }
    },
    created () {
      this.userId = this.tools.getUserInfo().id
      this.partyGroupId = this.$route.query.partyGroupId
      this.title = this.$route.query.title
      this.isRecommendNow = this.$route.query.isRecommendNow
      this.groupName = this.$route.query.groupName
      this.dgwName = this.$route.query.dgwName
      this.tabIndex = this.$store.state.demoHonor_tabIndex || 0
      this.newsQuery()
      this.loadData()
      this.recommendRecordViews()
      let key = 'demoHonor_upd_' + this.partyGroupId + this.userId
      this.hasUp = this.$localStorage.get(key)
    },
    beforeDestroy () {
      sessionStorage.setItem("onlineObservationFirst", JSON.stringify(false));
    },
    methods: {
      go () {
        // this.$router.push({name: 'demoHonor'})
      },
      more () {
        this.$router.push({name: 'demoHonorMore', query: {dgwId: this.partyGroupId, title: this.groupName}})
      },
      loadData () {
        let data = {
          pageNo: this.pageIndex,
          pageSize: this.pageSize,
          partyGroupId: this.partyGroupId,
          // partyGroupId: '999001001002'
        }
        console.log('this.userId=', this.userId)// 读取用户id
        console.log('localUserId=', JSON.parse(localStorage.getItem('localUserId')))// 读取用户id

        this.isLoading = true
        this.fetchService.honorQuery(data).then((res) => {
          this.isLoading = false
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          if (Array.isArray(res.data)&&this.swipeData.length>0 && !this.isHasFocus(this.swipeData[0].id,res.data)) {
            this.swipeData = this.swipeData.concat(res.data)
          }else{
            this.swipeData = res.data || []
          }
          let a= [],b= [],c= [],d= [],e = [],f =[]
          this.swipeData.forEach( (item,index) =>{
            if(item.level===1){
              a.push(item)
            }else if(item.level===2){
              b.push(item)
            }else if(item.level===3){
             c.push(item)
            }else if(item.level===4){
              d.push(item)
            }else if(item.level===5){
              e.push(item)
            }else {
              f.push(item)
            }

          })
          this.swipeData =[]
          if(a.length%2 !=0){
            a.push({
              id:null
            })
          }
          a.forEach( item=>{
            this.swipeData.push(item)
          })
          if(b.length%2 !=0){
            b.push({
              id:null
            })
          }
          b.forEach( item=>{
            this.swipeData.push(item)
          })
          if(c.length%2 !=0){
            c.push({
              id:null
            })
          }
          c.forEach( item=>{
            this.swipeData.push(item)
          })
          if(d.length%2 !=0){
            d.push({
              id:null
            })
          }
          d.forEach( item=>{
            this.swipeData.push(item)
          })
          if(e.length%2 !=0){
            e.push({
              id:null
            })
          }
          e.forEach( item=>{
            this.swipeData.push(item)
          })
          f.forEach( item=>{
            this.swipeData.push(item)
          })
           this.pageIndex ++
        })
      },
      getLevel(data){
        if(data.level===1){
          return '国家级'
        }else if(data.level===2){
          return '省(部)级'
        }else if(data.level===3){
          return '厅(局)级'
        }else if(data.level===4){
          return '地(市)级'
        }else if(data.level===5){
          return '市(县)以下'
        }
        return '其他'
      },
      getVideoSrc (item) {
        if (item.newsContent && item.newsContent.videoUrl && item.newsContent.videoUrl !== '') {
          return item.newsContent.videoUrl
        }
        return this.tools.getImgUrl(item.files && item.files[0].fileId)
      },
      newsQuery () {
        this.onBottom = false
        let data = {
          pageNo: this.pageIndex,
          pageSize: 20,
          partyGroupId: this.partyGroupId,
          // partyGroupId: '999001001002'
          type:2
        }
        this.isLoading = true
        if ( this.countNum ) {
        this.fetchService.newsQuery(data).then((res) => {
          this.isLoading = false
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          if (res.data === null) {
            this.countNum = false // 将上拉刷新禁用
            this.onBottom = true
            // this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
            return
          }
          if (Array.isArray(res.data)&&this.newsQueryData.length>0 && !this.isHasFocus(this.newsQueryData[0].id,res.data)) {
            this.newsQueryData = this.newsQueryData.concat(res.data)
          }else{
            this.newsQueryData = res.data || []
            console.log('this.newsQueryData',this.newsQueryData)
          }
        })
        }else{
          this.isLoading = false
          this.onBottom = true
          this.options.isPullUpLoad = false
        }
      },
      getPoster (item) {
        return this.tools.getImgUrl(item.honorPic)
      },
      showImagePreview (item) {
        let imgs = [this.getPoster(item)]
        this.$createImgViewComponent({
          $props: {
            imgSrc: imgs[0],
            content: item.xjsj
          }
        }).show()
        return
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': true
            },
            domProps: {
              innerHTML: item.honorName
            },
            slot: 'header'
          }, '')
        }).show()
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      menu (tabIndex) {
        this.$store.state.demoHonor_tabIndex = tabIndex
        this.swipeData = []
        this.newsQueryData = []
        this.pageIndex = 1
        this.currentTabIndex = tabIndex
        this.tabIndex = tabIndex
        if (tabIndex === 0) {
          this.countNum =  true
          this.newsQuery()
        } else if (tabIndex === 1) {
          this.loadData()
        }
      },
      launchOnPullingUp () {
        console.log('launchOnPullingUp')
        this.newsQuery()
      },
      goRedCloudNewsDetail (item) {
        console.log('this.id',item.id)
        this.updateViews(item.id)
        if(item.videoUrl && item.videoUrl !== ''){
            item.views = item.views ? ++item.views : 1
            let url = item.videoUrl
            if (url.indexOf('?') >= 0) {
              url = url + '&access_token=' + this.tools.getToken()
            } else {
              url = url + '?access_token=' + this.tools.getToken()
            }
          if (window.android && window.android.openUrlAdapt) {
                window.android.openUrlAdapt(url)
              }
          return
        }
        item.views = item.views ? ++item.views : 1
        this.$store.state.id = item.id
        this.$store.state.isVideo = 1
        this.$store.state.videoDetail = item
        this.$refs.dialog.show()
      },
      getGood() {
        this.showGood = !this.showGood;
      },
      getSign() {
        this.showSign = !this.showSign;
      },
      loadDataH5 () {
         this.tools.alert('未开放')
//        this.$router.push({path: `/branchSpace/${this.partyGroupId}`})
      },
      // 点赞
      up () {
        let key = 'demoHonor_upd_' + this.partyGroupId + this.userId
        if (this.hasUp) {
          this.tools.tip('您已点赞过')
          return
        }
        this.fetchService.recommendRecordDianZan(this.partyGroupId).then(res => {
          if (res.code === 0) {
            localStorage.setItem('localUserId', JSON.stringify(this.userId)) //添加缓存
            this.hasUp = true
              this.$localStorage.set(key, true)
            this.tools.tip('点赞成功')
            return
          }
          return this.tools.tip(res.message)
        })
      },
      // 支部浏览量增加
      recommendRecordViews () {
        this.fetchService.recommendRecordViews(this.partyGroupId)
      },
      // 文章浏览量增加
      updateViews (contentId) {
        let params = {
          contentId,
          type: '1'
        }
        this.fetchService.updateCount(params)
      },
      /*判断是否存在某个值*/
      isHasFocus (userId, list) {
        let ret = false
        list.some(v => {
          if (v.id === userId) {
            ret = true
            return false
          }
        })
        return ret
      }
    }
  }
</script>

<style scoped>
  .titleStyle{
    width: 60%;
    margin-right: 14%;
    text-align:center;
  }
  .week-top{
    height:auto;
    min-height: 71px;
  }
  .con{
    height: 250px;
    width: 200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 100px;
    position: relative;
    background-color: #4cd964;
  }
  .subscript{
    left: -20PX;
    color: #fff;
    height: 23PX;
    width: 82PX;
    top: 10PX;
    position: absolute;
    text-align: center;
    line-height: 24PX;
    /* font-family: "\9ED1\4F53"; */
    font-size: 9PX;
    background-color: #ee0c0c;
    -webkit-transform: rotate(45deg);
    transform: rotate(-45deg);
  }
  p{
    font-size: 16PX;
  }
  .content-null{
    background-size: cover;
    width: 4.26667rem;
    height: 2.96rem;
    padding: 0.13333rem;
    margin: auto;
  }
</style>
